<%@ page language="java" import="java.util.*" pageEncoding="Utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>房间预订</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/common/style/qdh.css" type="text/css" media="screen" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/common/src/css/jscal2.css" type="text/css" media="screen" />
<script src="${pageContext.request.contextPath}/common/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/common/js/index.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/common/src/js/jscal2.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/common/src/js/lang/cn.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/common/js/formvalidator.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/common/js/formvalidatorregex.js"></script>
<script type="text/javascript">
$(function(){
	$.formValidator.initConfig({formid:"form",autotip:true});
	$("#name").formValidator({onshow:"请输入用户名",onfocus:"请输入用户名"}).inputValidator({min:2,max:40,onerror:"用户名应该为2-40位之间"}).regexValidator({regexp:"notempty",datatype:"enum",onerror:"请输入用户名"});
	$("#phone").formValidator({onshow:"请输入手机号码",onfocus:"请输入手机号码",oncorrect:"手机号码格式正确"}).regexValidator({regexp:"mobile",datatype:"enum",onerror:"手机号码格式错误"});
	$("#identityCardNum").formValidator({onshow:"请输入身份证号码",onfocus:"请输入身份证号码",oncorrect:"身份证号码输入正确"}).regexValidator({regexp:"idcard",datatype:"enum",onerror:"身份证号码格式错误"});
})

$(function(){
	$.getJSON('getLeft.action',{id:$("#id").val(),checkinTime:$("#checkinTime").val(),checkoutTime:$("#checkoutTime").val()},
		function(data){
			var num=data.num;
			if(num>10)num=10;
			for(var i=1;i<=num;i++){
				$("#num").append("<option value='"+i+"'>"+i+"</optioin>")
			}
		}
	)
})
$(function(){
	$("#checkinTime,#checkoutTime").click(function(){$(".DynarchCalendar-bottomBar").remove();})
	var sbtn=$(".sbtn");
	var time=$(".time");
	$(".sbtn").click(function(){
		var index=sbtn.index(this);	
		time.show();
		time.eq(index).hide();
	})
	$("#cancel").click(function(){
		time.eq(0).show();
		time.eq(1).hide();
	})
})

function checkRoom(){
	var id=$("#id").val();
	var checkinTime=$("#checkinTime").val();
	var checkoutTime=$("#checkoutTime").val();
	location.href="getRoomLeft.action?id="+id+"&checkinTime="+checkinTime+"&checkoutTime="+checkoutTime;
}
//判断是否确认时间
function submit1(){
	if($(".time").eq(0).css("display")=="none"||$("input[name='startTime']").val()=="null"){
	alert("请确认入住和退房时间");
	}else{
	$("#form").submit();
	}
}
$(function(){
	var isAvailable="${roomInfo.isAvailable}";
	if(isAvailable!=""){
	if(isAvailable=="false"){
		$("#msg").append("您选择的部分入住日期无法预订，请修改日期或<a href='../index.action#fjyd'>返回</a>重新选择。").css({border:"1px solid red"});
		$("#num").attr("disabled","disabled").css({border:"1px solid red",background:"#FFE1FF"}).val("");
		$("#orderinfo li input").attr("disabled","disabled").css({border:"1px solid red",background:"#FFE1FF"});
		$(".ordersubmitbox a").removeAttr("onclick");
		$("#orderinfo div").remove();
	}
	}
})
</script>
<style>
#info{
float:right;
border:1px solid #ddd;
}
</style>
</head>
<body>
<div id="wrap">
	<s:include value="../header.jsp"></s:include>
	<div id="container">
		<div class="mt10 cartbox">
		<form id="form" action="hotelBuyConfirm.action" method="post">
		<input name="order.roomStyleId" type="hidden" id="id" value="${roomInfo.id}">
		<input name="order.price" type="hidden" value="${roomInfo.price}">
		<section class="demo">
			<ul>
	       	 <li class="current">确认订单信息<em></em><i></i></li>
	       	 <li>成功提交等待审核<em></em><i></i></li>
	       	 <li>付款<em></em><i></i></li>
	       	 <li>完成<em></em><i></i></li>
	   	 </ul>
		</section>
			<div class="mt10 ordertitle">房间信息</div>
			<div class="mt10 carttable">
			<div id="info"><img width="138" height="103" onmouseover="toolTip('<img src=${pageContext.request.contextPath}/${roomInfo.picUrl}>')" onmouseout="toolTip()" src="${pageContext.request.contextPath}/${roomInfo.picUrl}"/></div>
				<ul>
					<li><span>您预订的房间：</span>${roomInfo.name}</li>		
					<li><span>单价：</span><strong id="price">${roomInfo.price}</strong></li>		
					<li><span>房间详情：</span>
					<div style="display:inline;">床型：${roomInfo.bedTypeName} </div>
					<div style="display:inline;margin-left:20px"">宽带：
					<s:if test="roomInfo.broadband==0">无</s:if>
					<s:elseif test="roomInfo.broadband==1">免费</s:elseif>
					<s:else>收费</s:else>
					</div>
					<div style="display:inline;margin-left:20px"">早餐：
					<s:if test="roomInfo.breakfast==0">无早</s:if>
					<s:elseif test="roomInfo.breakfast==1">免费</s:elseif>	
					<s:else>收费</s:else>
					</div>
					
					</li>				
					<li class="time"><span>入住日期：</span><%=request.getParameter("checkinTime") %>		
					退房日期：<%=request.getParameter("checkoutTime") %>
					<a  href="javascript:void(0);"  class="sbtn">更改</a>
					<font style="color:red;margin-left:10px;">温馨提示：需提前一天预订</font><font  id="msg"></font></li>
					
					<li class="time" style="display:none;"><span>入住日期：</span><input type="text" class="scenetime mr10" id="checkinTime" name="checkinTime" value="<%=request.getParameter("checkinTime")%>"/>	
					退房日期：<input type="text" class="scenetime" id="checkoutTime" name="checkoutTime" value="<%=request.getParameter("checkoutTime")%>"/>
					<a  href="javascript:void(0);" onclick="checkRoom();" class="sbtn">确定</a><a  href="javascript:void(0);" onclick="" id="cancel" class="sbtn">取消</a>
					<font style="color:red;margin-left:10px;">温馨提示：需提前一天预订</font></li>
					
					<script type="text/javascript">
						Calendar.setup({
						weekNumbers: true,
						inputField : "checkinTime",
						trigger: "checkinTime",
						dateFormat: "%Y-%m-%d",
						minuteStep: 1,
						disabled : function(date) {									
						return (date < new Date());
						 },
						onSelect: function() {
							this.hide();									
							var end=$("#checkoutTime").val();
							var start=$("#checkinTime").val();
							if(start>=end){
							var date= Calendar.intToDate(this.selection.get());
							date.setDate(date.getDate()+1)
							date =Calendar.printDate(date, "%Y-%m-%d");
							$("#checkoutTime").val(date);
							}									
						}
						});								
						Calendar.setup({
						weekNumbers: true,
						inputField : "checkoutTime",
						trigger : "checkoutTime",
						dateFormat: "%Y-%m-%d",
						minuteStep: 1,
						disabled: function(date) {
						var str = $("#checkinTime").val();								
						str=str.replace(/-/g,"/")+" 00:00:00";
						var d = new Date(str);
						d.setDate(d.getDate()+1)
						return (date < d);
						 },
						onSelect   : function() {
						this.hide();
						 }
						});
					</script>
					
					<input type="hidden" name="startTime" value="<%=request.getParameter("checkinTime") %>"/>
					<input type="hidden" name="endTime" value="<%=request.getParameter("checkoutTime") %>"/>
					<li><span>预订数量：</span>
						<SELECT id="num" name="order.totalNum">
						</SELECT>				
				</ul>
				
			</div>
			<div class="mt10 ordertitle">预定信息</div>
			<div class="mt10 carttable">
				<ul id="orderinfo">
					<li><span>入住人姓名：</span><input type="text" class="ordertxt mr10" id="name" name="order.customerName"/></li>
					<li><span>入住人身份证：</span><input type="text" class="ordertxt mr10" id="identityCardNum" name="order.identityCardNum"/></li>
					<li><span>预订人手机：</span><input type="text" class="ordertxt mr10"  id="phone" name="order.phone"/></li>
				</ul>
			</div>
			<div class="ordersubmitbox"><a href="javascript:void(0);" title="提交订单" onclick="submit1();"><img src="${pageContext.request.contextPath}/common/image/submitorderbtn.jpg" alt=""/></a></div>
			</form>
		</div>
		<div class="clr"></div>
	</div>
	<s:include value="../footer.htm"></s:include>
	<script src="${pageContext.request.contextPath}/common/js/ToolTip.js" type="text/javascript"></script>
</div>
</body>
</html>
